<template>
  <div class="vipPage">
    <el-button icon="el-icon-close" class="btn-back" @click="toBack" circle></el-button>
    <div class="vipPage-header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的会员</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="vipPage-content">
      <!-- vip轮播 -->
      <el-carousel :interval="4000" height="250px" width="500px" ref="carousel" @click.native="linkTo">
        <el-carousel-item v-for="item in imagesBox" :key="item.id">
          <img :src="item.idView" class="image">
        </el-carousel-item>
      </el-carousel>
      <div class="vip-page">
        <h2 class="vip-title">{{userGrade}}</h2>
        <!-- <div :class="userVipPre">
        </div> -->
        <div class="vip-copper" v-if="ordinary_agent">
        </div>
        <div class="vip-copper" v-if="primary_agent">
        </div>
        <div class="vip-silver" v-if="middle_agent">
        </div>
        <div class="vip-gold" v-if="senior_agent">
        </div>
        <div class="soild_text_one">
          <fieldset>
            <legend>VIP尊享特权体验</legend>
          </fieldset>
          <!-- 暂无权益 -->
          <div class="vip_privilege" v-if="ordinary_agent">
            <div class="privilege">
              <img :src="ordinary1" alt="" class="vip-img"/>
              <div class="pri-title">
                可享受案件即时结算
              </div>
            </div>
            <div class="privilege">
              <img :src="ordinary2" alt="" class="vip-img"/>
              <div class="pri-title">
                推荐新代理人完成案件可获得奖励
              </div>
            </div>
            <div class="privilege">
              <img :src="ordinary3" alt="" class="vip-img"/>
              <div class="pri-title">
                具有代理人评级资格
              </div>
            </div>
            <div class="privilege">
              <img :src="ordinary4" alt="" class="vip-img"/>
              <div class="pri-title">
                余额可提现至非本人账号
              </div>
            </div>
            <div class="privilege">
              <img :src="ordinary5" alt="" class="vip-img"/>
              <div class="pri-title">
                代理人收益免收税费
              </div>
            </div>
            <div class="privilege">
              <img :src="ordinary6" alt="" class="vip-img"/>
              <div class="pri-title">
                每月最低完成案件数为<font class="font_success">4</font>件
              </div>
            </div>
          </div>
          <div class="vip_privilege" v-if="primary_agent">
            <div class="privilege">
              <img :src="primary1" alt="" class="vip-img"/>
              <div class="pri-title">
                可享受案件即时结算
              </div>
            </div>
            <div class="privilege">
              <img :src="primary2" alt="" class="vip-img"/>
              <div class="pri-title">
                推荐新代理人完成案件可获得奖励
              </div>
            </div>
            <div class="privilege">
              <img :src="primary3" alt="" class="vip-img"/>
              <div class="pri-title">
                具有代理人评级资格
              </div>
            </div>
            <div class="privilege">
              <img :src="primary4" alt="" class="vip-img"/>
              <div class="pri-title">
                余额可提现至非本人账号
              </div>
            </div>
            <div class="privilege">
              <img :src="primary5" alt="" class="vip-img"/>
              <div class="pri-title">
                代理人收益免收税费
              </div>
            </div>
            <div class="privilege">
              <img :src="primary6" alt="" class="vip-img"/>
              <div class="pri-title">
                每月最低完成案件数为<font class="font_success">2</font>件
              </div>
            </div>
            <div class="privilege">
              <img :src="primary6" alt="" class="vip-img"/>
              <div class="pri-title">
                每月提现次数为<font class="font_success">4</font>次
              </div>
            </div>
          </div>
          <div class="vip_privilege" v-if="middle_agent">
            <div class="privilege">
              <img :src="middle1" alt="" class="vip-img"/>
              <div class="pri-title">
                可享受案件即时结算
              </div>
            </div>
            <div class="privilege">
              <img :src="middle2" alt="" class="vip-img"/>
              <div class="pri-title">
                推荐新代理人完成案件可获得奖励
              </div>
            </div>
            <div class="privilege">
              <img :src="middle3" alt="" class="vip-img"/>
              <div class="pri-title">
                具有代理人评级资格
              </div>
            </div>
            <div class="privilege">
              <img :src="middle4" alt="" class="vip-img"/>
              <div class="pri-title">
                余额可提现至非本人账号
              </div>
            </div>
            <div class="privilege">
              <img :src="middle5" alt="" class="vip-img"/>
              <div class="pri-title">
                代理人收益免收税费
              </div>
            </div>
            <div class="privilege">
              <img :src="middle6" alt="" class="vip-img"/>
              <div class="pri-title">
                每月最低完成案件数为<font class="font_success">2</font>件
              </div>
            </div>
            <div class="privilege">
              <img :src="middle7" alt="" class="vip-img"/>
              <div class="pri-title">
                可带徒弟，徒弟案件结算费用的<font class="font_success">50%</font>作为指导费
              </div>
            </div>
            <div class="privilege">
              <img :src="middle4" alt="" class="vip-img"/>
              <div class="pri-title">
                每月提现次数为<font class="font_success">6</font>次
              </div>
            </div>
          </div>
          <div class="vip_privilege" v-if="senior_agent">
            <div class="privilege">
              <img :src="height1" alt="" class="vip-img"/>
              <div class="pri-title">
                可享受案件即时结算
              </div>
            </div>
            <div class="privilege">
              <img :src="height2" alt="" class="vip-img"/>
              <div class="pri-title">
                推荐新代理人完成案件可获得奖励
              </div>
            </div>
            <div class="privilege">
              <img :src="height3" alt="" class="vip-img"/>
              <div class="pri-title">
                具有代理人评级资格
              </div>
            </div>
            <div class="privilege">
              <img :src="height4" alt="" class="vip-img"/>
              <div class="pri-title">
                余额可提现至非本人账号
              </div>
            </div>
            <div class="privilege">
              <img :src="height5" alt="" class="vip-img"/>
              <div class="pri-title">
                代理人收益免收税费
              </div>
            </div>
            <div class="privilege">
              <img :src="height6" alt="" class="vip-img"/>
              <div class="pri-title">
                每月最低完成案件数为<font class="font_success">0</font>件
              </div>
            </div>
            <div class="privilege">
              <img :src="height7" alt="" class="vip-img"/>
              <div class="pri-title">
                可带徒弟，徒弟案件结算费用的<font class="font_success">50%</font>作为指导费
              </div>
            </div>
            <div class="privilege">
              <img :src="height3" alt="" class="vip-img"/>
              <div class="pri-title">
                代理人可进行<font class="font_success">1</font>次无理由申诉
              </div>
            </div>
            <div class="privilege">
              <img :src="height4" alt="" class="vip-img"/>
              <div class="pri-title">
                每月提现次数为<font class="font_success">6</font>次
              </div>
            </div>
          </div>

        </div> 
        <el-button icon="el-icon-arrow-left" circle class="level-up" @click="to_upLevel"></el-button>
        <el-button icon="el-icon-arrow-right" circle class="level-next" @click="to_nextLevel"></el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
      return{
        primary_agent: false,
        middle_agent: false, 
        senior_agent: false, 
        ordinary_agent: false,
        imagesBox:[
          {id:0,idView:require("~/assets/img/vip/自提案件.jpg"),link: '/mechanism/order/myOrder'},
          {id:1,idView:require("~/assets/img/vip/推荐代理人.jpg"),link: '/mechanism/home/recommend'},
        ],
        ordinary1: require('~/assets/img/vip/银1.png'),
        ordinary2: require('~/assets/img/vip/银2.png'),
        ordinary3: require('~/assets/img/vip/银3.png'),
        ordinary4: require('~/assets/img/vip/银4.png'),
        ordinary5: require('~/assets/img/vip/银5.png'),
        ordinary6: require('~/assets/img/vip/银6.png'),
        primary1: require('~/assets/img/vip/铜1.png'),
        primary2: require('~/assets/img/vip/铜2.png'),
        primary3: require('~/assets/img/vip/铜3.png'),
        primary4: require('~/assets/img/vip/p4.png'),
        primary5: require('~/assets/img/vip/p5.png'),
        primary6: require('~/assets/img/vip/p6.png'),
        middle1: require('~/assets/img/vip/m1.png'),
        middle2: require('~/assets/img/vip/m2.png'),
        middle3: require('~/assets/img/vip/m3.png'),
        middle4: require('~/assets/img/vip/m4.png'),
        middle5: require('~/assets/img/vip/m5.png'),
        middle6: require('~/assets/img/vip/m6.png'),
        middle7: require('~/assets/img/vip/m7.png'),
        height1: require('~/assets/img/vip/h1.png'),
        height2: require('~/assets/img/vip/h2.png'),
        height3: require('~/assets/img/vip/h3.png'),
        height4: require('~/assets/img/vip/h4.png'),
        height5: require('~/assets/img/vip/h5.png'),
        height6: require('~/assets/img/vip/h6.png'),
        height7: require('~/assets/img/vip/h7.png'),
      }
    },
    computed:{
      userVipPre() {
        if(this.userGrade = '初级代理人'){
          return 'vip-copper'
        } else if(this.userGrade = '中级代理人'){
          return 'vip-silver';
        } else if(this.userGrade = '高级代理人'){
          return 'vip-gold';
        } else if(this.userGrade = '普通代理人'){
          return 'vip-copper';
        }
      },
    },
    created(){
      if(this.$store.state.user.grade == 1){
          this.userGrade = '初级代理人'
          this.primary_agent = true
      }else if(this.$store.state.user.grade == 2){
          this.userGrade = '中级代理人'
          this.middle_agent = true
      }else if(this.$store.state.user.grade == 3){
          this.userGrade = '高级代理人'
          this.senior_agent = true
      } else{
          this.userGrade = '普通代理人'
          this.ordinary_agent = true
      }
    },
    components: {

    },
    methods:{
      to_upLevel(){
        if(this.senior_agent){
          this.senior_agent = false
          this.middle_agent = true
          this.userGrade = '中级代理人'
        }else if(this.middle_agent){
          this.middle_agent = false
          this.primary_agent = true
          this.userGrade = '初级代理人'
        }else if(this.primary_agent){
          this.primary_agent = false
          this.ordinary_agent = true
          this.userGrade = '普通代理人'
        }
      },
      to_nextLevel(){
        if(this.middle_agent){
          this.middle_agent = false
          this.senior_agent = true
          this.userGrade = '高级代理人'
        }else if(this.primary_agent){
          this.primary_agent = false
          this.middle_agent = true
          this.userGrade = '中级代理人'
        }else if(this.ordinary_agent){
          this.ordinary_agent = false
          this.primary_agent = true
          this.userGrade = '初级代理人'
        }
      },
      linkTo(){
        let activeIndex = this.$refs.carousel.activeIndex
        this.$router.push(this.imagesBox[activeIndex].link)
      },
      buyVip(){

      },
      // 返回
      toBack(){
        this.$router.go(-1);
      },
      refresh() {
        
      },
    }
}
</script>
<style lang="less">
.vipPage {
  width: 600px;
  margin: 0 auto;
  padding: 25px 30px;
  position: relative;
  background:rgba(179, 177, 177, 0.5);
  .btn-back{
    position: absolute;
    top:15px;
    right:30px;
    opacity:0.5;
  }
  &-header {
    height: 45px;
    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner,
        .el-breadcrumb__separator {
          font-size: 25px;
          color: rgba(0, 35, 151, 1);
          font-weight: 400;
        }
      }
      .el-breadcrumb__item:first-child {
        .el-breadcrumb__inner {
          padding-left: 10px;
          border-left: 5px solid #002397;
        }
      }
    }
    border-bottom: 2px solid #e5e5e5;
    box-sizing: border-box;
  }
  &-content {
    margin: 20px auto;
    .level-up{
      opacity:0.5;
      position: absolute;
      // bottom:40%;
      top:700px;
      left:18px;
      margin-left:18px
    }
    .level-next{
      opacity:0.5;
      position: absolute;
      // bottom:40%;
      top:700px;
      right:38px;
    }
    .vip-page{
      margin-top: 10px;
      background: linear-gradient(rgb(43, 42, 42) 25%,rgba(255,255,255,1) 25%);
      padding: 10px;
      .vip-title{
        text-align:center;
        padding:40px;
        color:#fff;
        font-size:20px;
      }
      .vip-recharge{
        position: relative;
        width:80%;
        height:180px;
        border-radius:12px;
        margin:0 auto;
        background:linear-gradient(133deg,rgba(220,199,165,1) 0%,rgba(245,218,174,1) 29%,rgba(245,218,174,1) 42%,rgba(207,156,121,1) 100%);
        
      }
     
    }
  }
  .soild_text_one{
    width:80%;
    margin:35px auto 20px;
    fieldset{
          height: 500px;
          border-left: none;
          border-right: none;
          border-bottom: none;
          color: #000;
          border-color: #000;
          height:20px;
          legend{
              text-align: center;
              padding: 0 10px;
              font-size: 14px;
          }
      }
  }
  .vip_privilege{
    .privilege{
      padding:18px 5px;
      display: flex;
      .pri-title{
        padding: 10px 0;
        margin-left: 15px;
        font-size: 15px;
        color:rgba(152,152,152,1);
        word-wrap:break-word;
      }
    }
    .vip-img{
      height: 48px;
      width: 48px;
    }
  }
}
</style>